<template>
  <view>
    <uv-status-bar></uv-status-bar>
    <!-- 最左侧-通知模块业务 -->
    <uv-transition :show="data.model === 'notification'" mode="slide-left">
      <uv-sticky bgColor="#fff">
        <uv-tabs :list="notificationItems" itemStyle="width:43%;height:34px"></uv-tabs>
        <uv-notice-bar :text="noticeBarText"></uv-notice-bar>
        <uv-empty mode="data"></uv-empty>
      </uv-sticky>
    </uv-transition>
    <!-- 中间首页 -->
    <uv-transition :show="data.model === 'device'" mode="fade">
      <!-- <uv-swiper :list="list5"  circular :indicatorStyle="'left'" :vertical="true" >
      </uv-swiper>-->
      <uv-swiper :list="list5" circular :autoplay="true" bgColor="#ecf5ff">
      </uv-swiper>

      <uv-grid :border="true" align="center">
        <uv-icon size="360" name="scan" @click="handleScanClick()"></uv-icon>
      </uv-grid>
      <!-- 距离扫码图标30距离 -->
      <!-- <uv-gap height="15"></uv-gap> -->

      <!-- 功能点宫格 -->

      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-gap height="5"></uv-gap>
      <view style="display: flex; align-items: center">
        <uv-icon name="twitte" size="20"></uv-icon>
        <text class="title-text">航班管理</text>
      </view>
      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-grid :border="true">
        <uv-grid-item v-for="(listItem, listIndex) in flightItems" :key="listIndex"
          @click="handleItemclick(listItem.title)">
          <uv-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></uv-icon>
          <text class="grid-text">{{ listItem.title }}</text>
        </uv-grid-item>
      </uv-grid>
      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-gap height="5"></uv-gap>
      <view style="display: flex; align-items: center">
        <uv-icon name="grid-fill" size="20"></uv-icon>
        <text class="title-text">设备管理</text>
      </view>
      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-grid :border="true" align="center" col="4">
        <uv-grid-item v-for="(listItem, listIndex) in deviceItems" :key="listIndex"
          @click="handleItemclick(listItem.title)">
          <uv-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></uv-icon>
          <text class="grid-text">{{ listItem.title }}</text>
        </uv-grid-item>
      </uv-grid>
      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-gap height="5"></uv-gap>
      <view style="display: flex; align-items: center">
        <uv-icon name="account" size="20"></uv-icon>
        <text class="title-text">考勤管理</text>
      </view>
      <uv-gap height="5"></uv-gap>
      <uv-line></uv-line>
      <uv-grid :border="true">
        <uv-grid-item v-for="(listItem, listIndex) in attendanceItems" :key="listIndex"
          @click="handleItemclick(listItem.title)">
          <uv-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></uv-icon>
          <text class="grid-text">{{ listItem.title }}</text>
        </uv-grid-item>
      </uv-grid>
      <uv-toast ref="uToast" />
    </uv-transition>
    <!-- 最右侧用户登录和用户信息 -->
    <uv-transition :show="data.model === 'myCenter'" mode="slide-right">
      <uv-notice-bar :text="noticeBarText1"></uv-notice-bar>
    </uv-transition>
    <uv-gap height="50"></uv-gap>
    <!-- 底部操作栏 -->
    <uv-tabbar :value="data.tabbarValue" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
      <uv-tabbar-item text="通知" icon="bell" @click="handleTabbarClick('通知')"></uv-tabbar-item>
      <uv-tabbar-item text="首页" icon="home" @click="handleTabbarClick('设备')"></uv-tabbar-item>
      <uv-tabbar-item text="我的" icon="account" @click="handleTabbarClick('我的')"></uv-tabbar-item>
    </uv-tabbar>
    <!-- <uv-safe-bottom></uv-safe-bottom> -->
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getCurrentInstance } from "vue";

const data = reactive({
  model: "device",
  tabbarValue: 1,
});
const deviceItems = [
  {
    name: "grid-fill",
    title: "库存",
  },
  {
    name: "lock",
    title: "维护",
  },
  {
    name: "star",
    title: "借用",
  },
  {
    name: "star",
    title: "采购",
  },
];
const flightItems = [
  {
    name: "grid-fill",
    title: "动态管理",
  },
  {
    name: "lock",
    title: "服务管理",
  },
  {
    name: "star",
    title: "机型服务",
  },
];
const attendanceItems = [
  {
    name: "grid-fill",
    title: "制度管理",
  },
  {
    name: "lock",
    title: "打卡管理",
  },
  {
    name: "star",
    title: "请假管理",
  },
  {
    name: "star",
    title: "加班管理",
  },
  {
    name: "star",
    title: "值班管理",
  },
  {
    name: "star",
    title: "出差管理",
  },
  {
    name: "star",
    title: "绩效管理",
  },
];
const noticeBarText =
  "uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用";
const list5 = [
  "http://png.suny.work/1.jpg",
  "http://png.suny.work/2.jpg",
  "http://png.suny.work/3.jpg",
];
const noticeBarText1 = "测试的滚动消息123123123！！！";
const notificationItems = [
  {
    name: "工作消息",
  },
  {
    name: "系统消息",
  },
];
function handleTabbarClick(data1: any) {
  if (data1 === "通知") {
    getData();
    data.tabbarValue = 0;
    data.model = "notification";
    // 暂时不进行业务跳转
    // uni.navigateTo({
    // 	url: '/pages/notification/index',
    // 	success: res => {},
    // 	fail: () => {},
    // 	complete: () => {}
    // });
  } else if (data1 === "设备") {
    data.tabbarValue = 1;
    data.model = "device";
  } else if (data1 === "我的") {
    data.tabbarValue = 2;
    data.model = "myCenter";
    // 检测登录状态
    uni.getStorage({
      key: "userInfo",
      success: function (res) {
        console.log("获取的数据为: " + res.data);
      },
      fail: (item) => {
        console.log("🚀 ~ uni.getStorage:", item);
        // 未检查到登录用户信息，即将跳转登录页面
        // 无参数
        uni.$uv.route("/pages/login/index");
      },
    });
  }
}
function getData() {
  uni.$uv.http.get("/mock/11/idcdevapi/user").then((data: any) => {
    console.log("🚀 ~ uni.$uv.http.get ~ data:", data);
  });
}
function handleItemclick(itemData: any) {
  uni.$uv.toast(itemData);
}
function handleScanClick() {
  uni.$uv.toast("点击了扫码框！");
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.title-text {
  padding: 10px;
  color: #3c9cff;
}
</style>